<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户搜索、查看菜品等功能实现测试页面</title>
</head>
<body>

                <div >
                    <div >
                        <!-- name="searchForm"根据name获取form的DOM对象。
                    th:action 指定form表单提交时请求的目标地址（最终会找到对应的控制器方法并执行）
                    method="get"指定请求方式，可以不用显式指定，因为默认为GET请求-->
                        <form name="searchForm" th:action="@{/user/usergoods}" method="get">
                            <!-- 用于用户点击分页导航按钮时，保存要查看的页码数，封装到查询条件中-->
                            <input type="hidden" name="page" id="page" value="1">
                            <div class="form1">
                                <ul class="row">
                                    <li>

                                        <!--为查询条件添加name属性-->
                                        <input type="text" name="goodsName" class="form-control" th:value="${goods.goodsName}" placeholder="搜索菜品"> </li>

                                </ul>
                            </div>
                        </form>
                        <div>
                            <table class="table">
                                <thead>
                                <tr>
                                    <th  width="5%">序号</th>
                                    <th width="10%">菜品名称</th>
                                    <th>菜品简介</th>

                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="goods,stat : ${goodsList}">
                                    <td th:text="${stat.count}"></td>
                                    <td th:text="${goods.goodsName}"></td>
                                    <td th:text="${goods.goodsPrice}"></td>
                                    <td th:title="${goods.goodsIntroduce}" th:text="${#strings.abbreviate(goods.goodsIntroduce,150)}">菜品简介</td>

                                    <td>
                                        <span>
                                    <a th:href="@{/user/usergoods/{id}(id=${goods.goodsId})}">详情</a></td>
                                    </span>

                                </tr>
                                </tbody>
                            </table>



                            <nav aria-label="Page navigation" class="page">
                                <ul class="pagination">
                                    <li class="page-item">
                                        <a>
                                            <span th:text="${'共&nbsp; '+ pageInfo.total +'&nbsp;条记录&nbsp;&nbsp;&nbsp;'+ pageInfo.pageNum + ' / '+pageInfo.pages+' 页&nbsp;&nbsp;&nbsp;&nbsp;'}"></span>
                                        </a>
                                    </li>

                                    <li class="page-item" th:if="${pageInfo.hasPreviousPage}">
                                        <a class="page-link" href="javascript:;" aria-label="Previous" th:onclick="'toSearch(1)'">
                                            <span aria-hidden="true">首页</span>
                                        </a>
                                    </li>

                                    <li class="page-item" th:if="${pageInfo.hasPreviousPage}">
                                        <a class="page-link" href="javascript:;" aria-label="Previous" th:onclick="'toSearch('+${pageInfo.prePage}+')'">
                                            <span aria-hidden="true">上一页</span>
                                        </a>
                                    </li>

                                    <!--页码区1、2、3、4、5...-->
                                    <li th:class="'page-item'+${nav == pageInfo.pageNum ? 'active' : ''}" th:each="nav :${pageInfo.navigatepageNums}">
                                        <a class="page-link" href="javascript:;" th:text="${nav}" th:onclick="'toSearch('+${nav}+')'">1</a>
                                    </li>

                                    <li class="page-item" th:if="${pageInfo.hasNextPage}">
                                        <a class="page-link" href="javascript:;" aria-label="Next" th:onclick="'toSearch('+${pageInfo.nextPage}+')'">
                                            <span aria-hidden="true">下一页</span>
                                        </a>
                                    </li>

                                    <li class="page-item" th:if="${pageInfo.hasNextPage}">
                                        <a class="page-link" href="javascript:;" aria-label="Next" th:onclick="'toSearch('+${pageInfo.pages}+')'">
                                            <span aria-hidden="true">尾页</span>
                                        </a>
                                    </li>

                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>


<script>
    lay('#version').html('-v' + laydate.v);
    laydate.render({
        elem: '#date'
        , range: true
        , theme: '#2c9eae'
    });
    //num要去第几页
    function toSearch(num) {
        //根据name获取form表单DOM对象，这里searchForm需要与form表单中的name属性指定的名称一样
        var form = $("form[name=searchForm]");
        //通过ID选择器，获取到page DOM对象，并为其赋值
        $('#page').val(num);
        form.submit();

    }
</script>


</body>
</html>